<template>
	<div class="role-item-container" :class="role.id === select.id ? 'select' : ''" @click="onSelect">
		<el-tooltip effect="dark" :content="role.name" placement="top" :disabled="isDisableTooltip">
			<span class="label" ref="title">{{ role.name }} </span>
		</el-tooltip>

		<span class="icon edit" @click="edit"><i class="el-icon-edit"></i></span>
		<span class="icon remove" @click="remove"><i class="el-icon-delete"></i></span>
	</div>
</template>

<script>
export default {
	components: {},
	props: {
		role: {
			type: Object,
			default: () => {}
		},
		select: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			isDisableTooltip: false
		};
	},
	computed: {},
	mounted() {
		this.$nextTick(() => {
			this.isDisableTooltip = this.requireTooltip();
		});
	},

	methods: {
		edit() {
			this.$emit('edit', this.role);
		},
		remove() {
			this.$emit('remove', this.role);
		},
		onSelect() {
			this.$emit('select', this.role);
		},
		requireTooltip() {
			if (this.$refs.title) {
				return this.$refs.title.offsetWidth >= this.$refs.title.scrollWidth;
			} else {
				return true;
			}
		}
	}
};
</script>

<style lang="less" scoped>
.role-item-container {
	width: 180px;
	height: 60px;
	background: #ffffff;
	padding: 16px 6px 16px 16px;
	box-sizing: border-box;

	.label {
		width: 120px;
		height: fit-content;
		font-size: 12px;
		font-weight: 400;
		color: #676a6c;
		line-height: 16px;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
	}
	.icon {
		width: 12px;
		height: 12px;
		cursor: pointer;
		visibility: hidden;
		color: #6384fe;
	}
}
.role-item-container:hover {
	background: #f2f4fc;
	.icon {
		visibility: visible;
	}
}
.select {
	background: #f2f4fc;
}
</style>
